<template>
  <view class="news-item">
    <up-swipe-action>
      <up-swipe-action-item
          :options="options1"
          name="isRead"
          @click="handleOptionsBtnClick"
      >
        <view class="swipe-action">
          <view class="swipe-action__content">
            <view class="read-dot" v-if="!newsData.isRead"/>
            <view class="news-content">
              <text class="title">
                系统消息
              </text>
              <text class="text">
                {{newsData.message}}
              </text>
            </view>
          </view>
        </view>
      </up-swipe-action-item>
    </up-swipe-action>
  </view>
</template>
<script setup>
import {reactive,defineProps,watch,defineEmits} from "vue";

const props = defineProps({
  newsData: {
    type: Object,
    default: {}
  }
})

const options1 = reactive([{
  text: '已读',
  name: 'isRead'
}]);

const emits = defineEmits(['newsOptionsBtnClickEmit'])
const handleOptionsBtnClick = params => {
  emits('newsOptionsBtnClickEmit', {...params, newsId: props.newsData.id})
}
</script>
<style scoped lang=less>
.news-item {
  :deep(.u-swipe-action-item__right__button__wrapper) {
    background-color: @color-blue;
  }
  :deep(.swipe-action__content) {
    position: relative;
    height: auto;
    background-color: @color-origin-white;
    padding: 43rpx 48rpx;
    box-sizing: border-box;
    .read-dot {
      position: absolute;
      top: 54rpx;
      left: 48rpx;
      width: 16rpx;
      height: 16rpx;
      border-radius: 16rpx;
      background-color: @color-red;
    }
    .news-content {
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      font-family: 'ali-p';
      .title {
        font-size: 32rpx;
        font-weight: 500;
        color: @color-black-text;
      }
      .text {
        margin-top: 28rpx;
        font-weight: 400;
        color: @color-grey-text;
        line-height: 39rpx;
        font-size: 23rpx;
      }
    }
  }
}
</style>
